<template>
  <div class="file-card">
    <el-card class="file-card__inner" shadow="never">
      <div class="file-card__content">
        <el-row class="file-card__title">
          <img :src="getFileIcon(fileData.fileType)" class="file-icon" />
        </el-row>
        <el-row>
          <span class="file-name" :title="fileData.fileName">{{ truncatedFileName }}</span>
        </el-row>
      </div>
      <el-button 
        class="select-btn" 
        :class="{ selected: isSelected }"
        circle 
        size="small" 
        @click.stop="toggleSelection"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { FileManage } from '../../type';

const props = defineProps<{
  fileData: FileManage;
  selectedItems: FileManage[];
}>();

const emit = defineEmits<{
  (e: 'toggleSelection', item: FileManage): void;
}>();

const isSelected = computed(() => {
  return props.selectedItems.some(item => item.id === props.fileData.id);
});

const toggleSelection = () => {
  emit('toggleSelection', props.fileData);
};

const getFileIcon = (fileType: string) => {
  const iconMap: { [key: string]: string } = {
    'doc': new URL('@/assets/document/word.svg', import.meta.url).href,
    'docx': new URL('@/assets/document/word.svg', import.meta.url).href,
    'txt': new URL('@/assets/document/txt.svg', import.meta.url).href,
    'ppt': new URL('@/assets/document/ppt.svg', import.meta.url).href,
    'pptx': new URL('@/assets/document/ppt.svg', import.meta.url).href,
    'pdf': new URL('@/assets/document/pdf.svg', import.meta.url).href,
    'jpg': new URL('@/assets/document/jpg.svg', import.meta.url).href,
    'jpeg': new URL('@/assets/document/jpg.svg', import.meta.url).href,
    'xls': new URL('@/assets/document/excel.svg', import.meta.url).href,
    'xlsx': new URL('@/assets/document/excel.svg', import.meta.url).href,
    'mp4': new URL('@/assets/document/video.svg', import.meta.url).href,
    'png': new URL('@/assets/document/png.svg', import.meta.url).href,
  };
  
  return iconMap[fileType.toLowerCase()] || iconMap['txt'];
};

// Computed property to truncate the file name
const truncatedFileName = computed(() => {
  const maxLength = 10; // Set the maximum length for the display
  return props.fileData.fileName.length > maxLength 
    ? props.fileData.fileName.slice(0, maxLength) + '...' 
    : props.fileData.fileName;
});
</script>

<style scoped>
.file-card {
  width: 200px;
  min-width: unset;
}

.file-card__inner {
  margin-left: 10px;
  position: relative;
  height: 120px;
}

.file-card__content {
  padding: 5px;
  min-height: unset;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.file-card__title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin-bottom: 4px;
  justify-content: center;
}

.file-name {
  white-space: nowrap; /* Prevent line breaks */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Show ellipsis */
  max-width: 180px; /* Set a max width for the name */
}

.file-card__belongs {
  margin-top: 10px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.file-icon {
  width: 140px;
  height: 80px;
}

.select-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  padding: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--el-border-color);
  background-color: transparent;
}

.file-card:hover .select-btn {
  display: block;
}

.select-btn.selected {
  display: block;
  background-color: var(--el-color-primary);
  border: none;
}
</style> 